<template>
    <div class="uploader-drop" :class="dropClass" ref="drop" v-show="support">
        <slot></slot>
    </div>
</template>

<script>
    import { uploaderMixin, supportMixin } from '../common/mixins';

    const COMPONENT_NAME = 'uploader-drop';

    export default {
        name:   COMPONENT_NAME,
        mixins: [uploaderMixin, supportMixin],
        data () {
            return {
                dropClass: '',
            };
        },
        methods: {
            onDragEnter () {
                this.dropClass = 'uploader-dragover';
            },
            onDragLeave () {
                this.dropClass = '';
            },
            onDrop () {
                this.dropClass = 'uploader-droped';
            },
        },
        mounted () {
            this.$nextTick(() => {
                const dropEle = this.$refs.drop;
                const uploader = this.uploader.uploader;

                uploader.assignDrop(dropEle);
                uploader.on('dragenter', this.onDragEnter);
                uploader.on('dragleave', this.onDragLeave);
                uploader.on('drop', this.onDrop);
            });
        },
        beforeUnmount () {
            const dropEle = this.$refs.drop;
            const uploader = this.uploader.uploader;

            uploader.off('dragenter', this.onDragEnter);
            uploader.off('dragleave', this.onDragLeave);
            uploader.off('drop', this.onDrop);
            uploader.unAssignDrop(dropEle);
        },
    };
</script>

<style>
  .uploader-drop {
    position: relative;
    padding: 10px;
    overflow: hidden;
    border: 1px dashed #ccc;
    background-color: #f5f5f5;
  }
  .uploader-dragover {
    border-color: #999;
    background-color: #f7f7f7;
  }
</style>
